<template>
  <div class="message">
    <!-- 客服人员 -->
    <div class="csa">
      <p class="title">客服人员</p>
      <!-- 客服列表 -->
      <div v-for="(item, index) in workerList" :key="index" class="csa_list">
        <!-- 客服头像 -->
        <div class="avatar">
          <el-avatar :size="85" :src="item.avatar"></el-avatar>
        </div>
        <!-- 客服信息 -->
        <div class="info">
          <p>名字：{{ item.nickname }}</p>
          <p>性别：{{ item.gender }}</p>
          <p>ID：{{ item.id }}</p>
        </div>
        <!-- 评价按钮 -->
        <div class="evaluate">
          <!-- 我的评价 -->
          <el-link
            type="primary"
            @click="isMyEvaluate(item)"
            style="color: limegreen"
            :underline="false"
            >我的评价</el-link
          >
          <!-- 我的评价对话框 -->
          <el-dialog
            title="我的评价"
            style="font-weight: bold"
            :visible.sync="dialogTableVisible"
          >
            <el-table :data="myEvaluateByWid">
              <el-table-column
                property="createTime"
                label="日期"
                width="250"
              ></el-table-column>
              <el-table-column
                property="content"
                label="评语"
                width="300"
              ></el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-tag
                    v-if="scope.row.type === '非常满意'"
                    type="success"
                    style="width: 70px; text-align: center"
                    >非常满意</el-tag
                  >
                  <el-tag
                    v-if="scope.row.type === '满意'"
                    type="info"
                    style="width: 70px; text-align: center"
                    >满意</el-tag
                  >
                  <el-tag
                    v-if="scope.row.type === '不满意'"
                    type="danger"
                    style="width: 70px; text-align: center"
                    >不满意</el-tag
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <!-- 评价客服 -->
          <el-link
            @click="formClick(item)"
            type="primary"
            style="color: limegreen"
            :underline="false"
            >评价客服</el-link
          >
          <!-- 评价客服对话框 -->
          <el-dialog title="客服评价" :visible.sync="dialogFormVisible">
            <el-form :model="evaluateForm">
              <el-form-item label="满意程度">
                <el-select
                  v-model="evaluateForm.satisfaction"
                  placeholder="请选择满意程度"
                >
                  <el-option label="非常满意" value="非常满意"></el-option>
                  <el-option label="满意" value="满意"></el-option>
                  <el-option label="不满意" value="不满意"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="评价内容">
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="evaluateForm.content"
                  maxlength="100"
                  show-word-limit
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="evaluateCancel()">取 消</el-button>
              <el-button type="primary" @click="submitMyEvaluate()"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
    <!-- 影院留言 -->
    <div class="cinema_message">
      <p class="title">影院留言</p>
      <!-- 用户留言列表 -->
      <div class="msgModule">
        <div v-for="(item, index) in msgList" :key="index" class="msg_list">
          <!-- 用户头像 -->
          <div class="avatar">
            <el-avatar :size="70" :src="item.user.avatar"></el-avatar>
          </div>
          <!-- 留言信息 -->
          <div class="info">
            <p>{{ item.user.nickname }}</p>
            <p class="content">{{ item.message.content }}</p>
            <p>Time: {{ item.message.createTime }}</p>
          </div>
        </div>
      </div>
      <!-- 添加留言 -->
      <div class="addMsg">
        <el-button
          type="success"
          style="width: 160px; height: 45px"
          @click="addMsg()"
          >添加留言</el-button
        >
        <!-- 添加留言对话框 -->
        <el-dialog title="添加留言" :visible.sync="addMsgFormVisible">
          <el-form :model="addMsgForm">
            <el-form-item label="留言内容">
              <el-input
                type="textarea"
                :rows="4"
                v-model="addMsgForm.content"
                maxlength="100"
                show-word-limit
                resize="none"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="msgCancel()">取 消</el-button>
            <el-button type="primary" @click="submitMsg()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { getWorker, getMyEvaluate, addEvaluate } from "@/api/worker";
import { getMessage, addMsg } from "@/api/message";
export default {
  data() {
    return {
      // 我的评价表格
      dialogTableVisible: false,
      // 评价客服表单
      dialogFormVisible: false,
      // 添加留言表单
      addMsgFormVisible: false,
      // 客服列表
      workerList: [
        // {
        //   name: "客服1",
        //   id: "539385ec-ef",
        //   sex: "男",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        // },
        // {
        //   name: "客服2",
        //   id: "56545ec-ui",
        //   sex: "女",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        // },
        // {
        //   name: "客服3",
        //   id: "94616hn-eh",
        //   sex: "男",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        // },
      ],
      //   留言列表
      msgList: [
        // {
        //   name: "客户1",
        //   content: "环境很好",
        //   time: "2022-01-19 14:45:12",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        // },
        // {
        //   name: "客户2",
        //   content: "服务很好",
        //   time: "2022-01-19 10:22:32",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        // },
        // {
        //   name: "客户uasdf",
        //   content: "系统做的很好",
        //   time: "2022-01-19 08:25:52",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        // },
        // {
        //   name: "客户12a3sdf5",
        //   content: "这人行，不错",
        //   time: "2022-01-19 18:05:12",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        // },
        // {
        //   name: "客户adf4asdf5",
        //   content: "这人能处，有评论是真写啊",
        //   time: "2022-01-19 22:43:01",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        // },
      ],
      // 我的评价列表
      myEvaluateByWid: [
        // {
        //   date: "2022-06-05 16:26:56",
        //   content: "好",
        //   satisfaction: "满意",
        // },
        // {
        //   date: "2022-06-05 16:26:56",
        //   content: "好",
        //   satisfaction: "非常满意",
        // },
        // {
        //   date: "2022-06-05 16:26:56",
        //   content: "不好",
        //   satisfaction: "不满意",
        // },
      ],
      // 评价客服表单
      evaluateForm: {
        satisfaction: "",
        content: "",
      },
      // 添加留言表单
      addMsgForm: {
        content: "",
      },
      // 是否登录
      isLogin: false,
    };
  },
  mounted() {
    this.isExistUid();
    this.loadWorkerList();
    this.loadMsgList();
  },
  methods: {
    // 判断是否登录
    isExistUid() {
      // console.log(localStorage.getItem("uid"))
      if (
        localStorage.getItem("uid") != null &&
        localStorage.getItem("uid") != ""
      ) {
        // alert("您还没有登录，请登录后重试");
        // this.$router.push("/home")
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    },
    // 获得客服人员列表
    loadWorkerList() {
      getWorker().then((res) => {
        res.msg = "客服人员";
        // console.log(res)
        this.workerList = res.data;
      });
    },
    // 获得影院留言列表
    loadMsgList() {
      getMessage().then((res) => {
        res.msg = "影院留言";
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].message.createTime = this.formatDate(
            res.data[i].message.createTime
          );
        }
        // console.log(res)
        this.msgList = res.data;
      });
    },
    // 我的评价按钮
    isMyEvaluate(item) {
      if (this.isLogin == true) {
        this.dialogTableVisible = true;
        this.loadMyEvaluate(item);
      } else {
        alert("您还没有登录，请登录后重试");
      }
    },
    // 获取我对客服的评论
    loadMyEvaluate(item) {
      const uid = localStorage.getItem("uid");
      const wid = item.id;
      getMyEvaluate(uid, wid).then((res) => {
        res.msg = "我的评论";
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].createTime = this.formatDate(res.data[i].createTime);
          res.data[i].updateTime = this.formatDate(res.data[i].updateTime);
        }
        // console.log(res);
        this.myEvaluateByWid = res.data;
      });
    },
    // 评价客服按钮
    formClick(item) {
      localStorage.setItem("wid", item.id);
      if (this.isLogin == true) {
        this.evaluateForm = Object.assign(
          {},
          this.$options.data().evaluateForm
        );
        this.dialogFormVisible = true;
      } else {
        alert("您还没有登录，请登录后重试！");
      }
    },
    // 取消提交我的评价
    evaluateCancel() {
      this.dialogFormVisible = false;
      this.evaluateForm = {
        satisfaction: "",
        content: "",
      };
      localStorage.removeItem("wid");
    },
    // 提交我的评价
    submitMyEvaluate() {
      if (
        this.evaluateForm.content == "" ||
        this.evaluateForm.satisfaction == ""
      ) {
        alert("满意程度或评价内容为空，请填写后提交！");
      } else {
        const data = {
          uid: localStorage.getItem("uid"),
          wid: localStorage.getItem("wid"),
          content: this.evaluateForm.content,
          type: this.evaluateForm.satisfaction,
        };
        addEvaluate(data).then((res) => {
          if (res.data.success == "ok") {
            this.dialogFormVisible = false;
          }
        });
        localStorage.removeItem("wid");
        setTimeout("window.location.reload()", 500);
      }
    },
    // 添加留言按钮
    addMsg() {
      if (this.isLogin == true) {
        this.addMsgFormVisible = true;
      } else {
        alert("您还没有登录，请登录后重试！");
      }
    },
    // 取消提交留言
    msgCancel() {
      this.addMsgFormVisible = false;
      this.addMsgForm = {
        content: "",
      };
    },
    // 提交留言
    submitMsg() {
      if (this.addMsgForm.content == "") {
        alert("留言内容为空，请填写后提交！");
      } else {
        const data = {
          uid: localStorage.getItem("uid"),
          content: this.addMsgForm.content,
        };
        addMsg(data).then((res) => {
          if (res.code == 200) {
            this.addMsgFormVisible = false;
          }
        });
        setTimeout("window.location.reload()", 500);
      }
    },

    // 日期格式化
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + "-";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + " ";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
.message {
  width: 1440px;
  height: 1000px;
  margin: 0 auto;
  // margin-top: 50px;

  .csa {
    width: 450px;
    height: 100%;
    background-color: rgb(36, 41, 48);
    float: left;
    color: rgb(215, 215, 215);
    overflow: auto;
    
    .title {
      font-size: 20px;
      font-weight: bold;
      padding: 40px;
    }
    .csa_list {
      width: 370px;
      height: auto;
      margin: 10px auto;
      padding: 20px;
      border-bottom: 2px lightgrey dashed;
      
      .avatar {
        float: left;
      }
      .info {
        height: 85px;
        margin-left: 120px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        font-size: 14px;
      }
      .evaluate {
        margin-top: 20px;
        clear: both;
        .stf {
          width: 60px;
          height: 25px;
        }
      }
    }
  }
  .cinema_message {
    width: 990px;
    height: 100%;
    background-color: rgb(53, 59, 67);
    float: left;
    color: rgb(215, 215, 215);
    position: relative;
    .title {
      font-size: 20px;
      font-weight: bold;
      padding: 40px;
      padding-left: 90px;
    }
    .msgModule {
      height: 800px;
      overflow: auto;
      .msg_list {
        width: 730px;
        height: auto;
        padding: 0 90px;
        margin-bottom: 80px;
        .avatar {
          float: left;
        }
        .info {
          height: 85px;
          margin-left: 120px;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          font-size: 14px;
          .content {
            color: white;
            font-size: 18px;
          }
        }
      }
    }
    .addMsg {
      position: absolute;
      right: 80px;
      bottom: 50px;
    }
  }
}
</style>